/**
 * 系统管理 用户管理
 */
<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="搜索">
                <el-input
                    size="small"
                    v-model="formInline.userName"
                    placeholder="输入用户名"
                ></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input
                    size="small"
                    v-model="formInline.phone"
                    placeholder="输入手机号"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-search"
                    @click="search"
                    >搜索</el-button
                >
                <!-- <el-button
                    size="small"
                    type="success"
                    icon="el-icon-plus"
                    @click="handleEdit()"
                    >添加</el-button
                > -->
                <!-- <el-button size="small" type="primary" @click="handleunit()">部门设置</el-button> -->
            </el-form-item>
        </el-form>
        <!--列表-->
        <el-table
            size="small"
            :data="userData"
            highlight-current-row
            v-loading="loading"
            border
            element-loading-text="拼命加载中"
            style="width: 100%"
        >
            <!-- <el-table-column align="center" type="selection" width="50">
      </el-table-column> -->
            <!-- <el-table-column align="center" sortable prop="deptName" label="公司" width="120">
      </el-table-column> -->
            <el-table-column
                align="center"
                sortable
                prop="userName"
                label="用户名"
                width="120"
            >
            </el-table-column>
            <el-table-column
                align="center"
                sortable
                prop="phone"
                label="手机号"
                width="120"
            >
            </el-table-column>
            <el-table-column
                align="center"
                sortable
                prop="email"
                label="邮件"
                min-width="120"
            >
            </el-table-column>
            <el-table-column
                align="center"
                sortable
                prop="power"
                label="权限"
                min-width="120"
            >
                <template slot-scope="scope">
                    <div>
                        {{ scope.row.power > 1 ? "超级管理员" : "普通管理员" }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                sortable
                prop="updatedAt"
                label="修改时间"
                min-width="180"
            >
                <template slot-scope="scope">
                    <div>{{ scope.row.updatedAt | timestampToTime }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="300">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="deleteUser(scope.$index, scope.row)"
                        >删除</el-button
                    >
                    <el-button
                        size="mini"
                        type="success"
                        @click="resetpwd(scope.$index, scope.row)"
                        >重置密码</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 编辑界面 -->
        <el-dialog
            :title="title"
            :visible.sync="editFormVisible"
            width="30%"
            @click="closeDialog('edit')"
        >
            <el-form
                label-width="80px"
                ref="editForm"
                :model="editForm"
                :rules="rules"
            >
                <el-form-item label="用户名" prop="userName">
                    <el-input
                        size="small"
                        v-model="editForm.userName"
                        auto-complete="off"
                        placeholder="请输入用户名"
                    ></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="power">
                    <el-select
                        size="small"
                        v-model="editForm.power"
                        placeholder="请选择"
                        class="userRole"
                    >
                        <el-option label="普通管理员" value="1"></el-option>
                        <el-option label="超级管理员" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input
                        size="small"
                        v-model="editForm.phone"
                        maxLength="11"
                        placeholder="请输入手机号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="邮件" prop="email">
                    <el-input
                        size="small"
                        v-model="editForm.email"
                        placeholder="请输入邮箱地址"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog('edit')"
                    >取消</el-button
                >
                <el-button
                    size="small"
                    type="primary"
                    :loading="loading"
                    class="title"
                    @click="submitForm('editForm')"
                    >保存</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { httpAjax } from '../../api/axiosFun';
export default {
    data() {
        return {
            nshow: true, //switch开启
            fshow: false, //switch关闭
            loading: false, //是显示加载
            title: '添加用户',
            editFormVisible: false, //控制编辑页面显示与隐藏
            // 编辑与添加
            editForm: {
                id: null,
                userName: '',
                phone: '',
                email: '',
                power: '',
                password: '123',//初始密码123
                // token: localStorage.getItem('logintoken')
            },
            // 选择数据
            selectdata: [],
            // rules表单验证
            rules: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                power: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    {
                        pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
                        required: true,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {
                        pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                        required: true,
                        message: '请输入正确的邮箱',
                        trigger: 'blur'
                    }
                ],
            },
            // 请求数据参数
            formInline: {
                userName: '',
                phone: '',
            },
            //用户数据
            userData: [],
        }
    },
    created() {
        this.getdata()
    },
    methods: {
        // 获取数据方法
        getdata(parameter) {
            this.loading = true
            // 模拟数据开始
            httpAjax({
                method: 'POST',
                url: '/api/getManageList',
                data: {
                    name:this.formInline.userName,
                    phone:this.formInline.phone,
                }
            }).then(res => {
                console.log('1111',res)
                this.userData = res.data.data
            })
            this.loading = false
        },

        //搜索事件
        search() {
            this.getdata(this.formInline)
        },
        //显示编辑界面
        handleEdit: function (index, row) {
            this.editFormVisible = true
            if (row != undefined && row != 'undefined') {
                this.title = '修改用户'
                this.editForm.id = row.id;
                this.editForm.userName = row.userName;
                this.editForm.phone = row.phone;
                this.editForm.email = row.email;
                this.editForm.power = row.power;
            } else {
                this.title = '添加用户'
                this.editForm.id = null;
                this.editForm.userName = '';
                this.editForm.phone = '';
                this.editForm.email = '';
                this.editForm.power = '';
            }
        },
        // 编辑、添加提交方法
        submitForm(editData) {
            this.$refs[editData].validate(valid => {
                if (valid) {
                    // 模拟数据开始
                    httpAjax({
                        method: 'POST',
                        url: '/api/updateManage',
                        data: this.editForm
                    }).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        })
                        this.editFormVisible = false;
                        this.getdata();

                    })
                } else {
                    return false
                }
            })
        },
        // 关闭编辑、增加弹出框
        closeDialog(dialog) {
            if (dialog == 'edit') {
                this.editFormVisible = false
            }
        },
        // 删除用户
        deleteUser(index, row) {
            this.$confirm('确定要删除该用户么?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    // console.log(row.id);
                    httpAjax({
                        method: 'POST',
                        url: '/api/delManage',
                        data: {
                            id: row.id
                        }
                    }).then(res => {
                        if (res.data.code == '0000') {
                            this.getdata();
                            this.editFormVisible = false;
                        }
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        })
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消重置密码！'
                    })
                })
        },
        // 重置密码
        resetpwd(index, row) {

            this.$confirm('确定要重置密码吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    httpAjax({
                        method: 'POST',
                        url: '/api/updateManage',
                        data: {
                            id: row.id,
                            phone: row.phone,
                            password: '123',
                            userName: row.userName,
                            power: row.power,
                            email: row.email
                        }
                    }).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        })
                        this.editFormVisible = false;
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消重置密码！'
                    })
                })
        },
    }
}
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}
.userRole {
    width: 100%;
}
</style>

 